<template>
    <a-modal v-model="filterVisible" title="描述性统计" :footer="null" :centered="true">
        <div class="variables">
            <div class="h2">选择变量：<a-checkbox @click="selectAll" :indeterminate="checkedList.length>0&&checkedList.length<list.length" :checked="checkedList.length===list.length&&list.length>0">全选</a-checkbox></div>
            <div class="list">
                <a-checkbox-group v-model="checkedList">
                    <div class="check-item" v-for="item in list" :key="item.index">
                        <a-checkbox :value="item.index">{{item.name}}</a-checkbox>
                    </div>
                </a-checkbox-group>
            </div>
        </div>

        <div class="btns">
            <a-button type="primary" ghost @click="cancel">取消</a-button>
            <a-button type="primary" @click="goApply">应用</a-button>
        </div>
    </a-modal>
</template>

<script>
export default {
    props:['visible','sheetId'],
    data() {
        return {
            filterVisible:false,
            checkedList:[],
            list:[]
        }
    },
    watch:{
        visible(value) {
            if(value) {
                this.checkedList = [];
                this.$http.cloud_get_variables({action:'correlation',sheetId:this.sheetId}).then(res=>{
                    if(res.variables) {
                        this.list = res.variables;
                    }
                })
                this.filterVisible = true;
            }
        }
    },
    methods:{
        cancel() {
            this.filterVisible = false;
        },
        selectAll() {
            if(this.checkedList.length === this.list.length) {
                this.checkedList = [];
            } else {
                this.list.forEach(item=>{
                    let index = this.checkedList.indexOf(item.index);
                    if(index===-1) {
                        this.checkedList.push(item.index);
                    }
                });
            }
            
        },
        goApply() {            
            this.$http.cloud_descstats({indexs:this.checkedList.join(','),sheetId:this.sheetId}).then(res=>{
                this.$emit('setDescResult',res);
                this.filterVisible = false;
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.h2 {
    font-weight: bold;
    .ant-checkbox-wrapper {
        font-weight:normal;
    }
}
.variables {
    .list {
        height:150px;
        border:1px solid #ddd;
        margin:10px 0;
        padding:5px 10px;
        overflow-y: auto;
        .check-item {
            padding:3px 0;
        }
    }
}
</style>